<template>
  <div class="grp-tmpl-list">
    <div v-if="!list.length && !loading" class="no-record">
      <img src="~@/assets/img/no_records.png" alt="" /><br />
      暂无画像模板
    </div>
    <template v-else>
      <ul class="clearfix">
        <li v-for="item in list" :key="item.tmplId" class="grp-tmpl-item" @click="confirmTmpl(item)">
          <el-row :gutter="20">
            <el-col :span="6" align="center">
              <icon-svg name="iconFacTmpl"></icon-svg>
            </el-col>
            <el-col :span="18">
              <h6>{{ item.tmplNm }}</h6>
              <p>{{ item.tmplCmnt }}</p>
            </el-col>
          </el-row>
        </li>
      </ul>
      <el-row align="right">
        <el-col :span="24" align="right">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="params.currentPageNum"
            :page-size="params.pageSize"
            :pager-count="5"
            background
            layout="total, prev, pager, next"
            small
            :total="totalSize"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      list: [],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 12,
        queryParams: {
          tmplType: 1
        },
        descPriority: false
      },
      totalSize: 0
    }
  },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagImageTmpl/page'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.params.currentPageNum = val
      this.getList()
    },
    confirmTmpl(item) {
      this.$confirm(`确定使用模板【${item.tmplNm}】?`).then(() => this.$emit('callback', item))
    }
  }
}
</script>

<style lang="scss">
.grp-tmpl-list {
  padding: 30px 20px 20px 20px;
  .grp-tmpl-item {
    width: 23%;
    float: left;
    background-color: #fff;
    margin: 1%;
    padding: 20px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 2px 10px #ccc;
    &:hover {
      color: #455fbc;
      box-shadow: 2px 2px 10px #455fbc;
    }
  }
  h6 {
    font-size: 18px;
  }
  p {
    font-size: 14px;
    margin-top: 10px;
  }
  h6,
  p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  svg {
    width: 40px;
    height: 40px;
  }
  .no-record {
    font-size: 16px;
    text-align: center;
    color: #666;
    margin: 20px;
    img {
      margin-bottom: 10px;
    }
  }
}
</style>
